<template>
  <div>
    <div class="site w">
      <!-- 地址信息 -->
      <div class="site_box" @click="showlist">
        <!-- 无收货人信息 -->
        <div class="site_item_add" v-if=" !this.list">
          <img class="add_img" :src="img.add" alt="">
          <span>请添加收货人地址</span>
        </div>
        <!-- 有收货人信息 -->
        <div class="site_item" v-if="this.list">
          <div class="flex-be-center site_item_box site_item_box_name">
            <span>{{list.name}}</span>
            <p class="flex-be-center">
              <span>{{list.tel}}</span>
              <img class="more" :src="img.more" alt="">
            </p>
          </div>
          <div class="site_item_box site_item_box_site">
            <span>{{list.province}}</span>
            <span>{{list.city}}</span>
            <span>{{list.area}}</span>
            <span>{{list.details}}</span>
          </div>
  
        </div>
  
        <!-- 分割线 -->
        <div class="line">
          <img :src="img.line" alt="">
        </div>
  
      </div>
      <!-- 商品卡片信息 -->
      <div class="box_big_list">

     
      <div v-for="(item) in goods_list.goods" :key="item.id">
        <div class="order-box">
          <van-card :num="item.goods_num" :price="(item.money).toFixed(2)"  :title="item.goods_name" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" >
            <template #desc>
              <span style="margin-left: 0.2rem;line-height: 0.5rem;">
                {{item.attr_name}}
              </span>
              <div>
                <span style="margin-left: 0.2rem;">价格：</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.goods_price}}</span>  <span style="margin-left: 0.2rem;">diy价格</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.diy_price}}</span>
              </div>
            </template>
          </van-card>

        </div>
        <!-- 商品金额 -->
        <div class="flex-be-center order_money">
          <span>商品金额</span>
          <em style="color:rgba(216, 30, 6, 1) ;">¥ {{allprice(item.goods_num,price(item))}}</em>
        </div>
        <!-- 商品运费 -->
        <div class="flex-be-center order_freight">
          <span>运费</span>
          <em>+ ¥0.00</em>
        </div>
        <div>
          <!-- 备注 -->
          <div class="flex-be-center order_remark">
            <span>备注</span>
            <textarea rows="3" v-model="remarks" cols="20" placeholder="选填">
              </textarea>
          </div>
          <!-- <div></div> -->
        </div>
  
      </div>


      <!-- 遮罩层 -->
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
                 <!-- 添加支付选择 -->
       <div class="add_zhi" >
        <van-radio-group v-model="radios">
          <van-cell-group>
            <van-cell title="余额支付" clickable @click="radios = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="微信支付" clickable @click="radios = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
            <!-- <van-cell title="支付宝支付" clickable @click="radios = '3'">
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell> -->
            
          </van-cell-group>
        </van-radio-group>
        <div class="submit" @click="paysub">提交</div>
      </div>
      <!-- <div class="pay_box_btn" @click="pay">
        立即支付
      </div> -->
        </div>
      </van-overlay>
      


    </div>



      <!-- 立即支付 -->
      <div class="flex-be-center pay_box_con">
        <div class="pay_box_text">
          <em >实付金额:</em>
          <span style="color:rgba(216, 30, 6, 1);">¥{{goods_list.total_price}}</span>
        </div>
        <div class="pay_box_btn" @click="pay">
          立即支付
        </div>
  
      </div>
    </div>

    <!-- <router-view ></router-view> -->

  </div>

</template>
<style lang="" scoped>
    .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .add_zhi{
    width: 98%;
    display: flex;
    flex-direction: column;
  }
  .add_zhi .submit{
    width: 100%;
    height: 0.88rem;
    background-color: rgba(216, 30, 6, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    font-size: 0.28rem;
  }

  /* .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  } */
  /* 内容 */
  .box_big_list{
    margin-bottom: 1.8rem;
  }
  /* 收货地址添加样式 */
  .site_box {
    margin-top: 1.38rem;
    margin-bottom: 0.8rem;
    width: 100%;
    height: 2.1rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0rem 0rem 0rem rgba(225, 225, 225, 1);
  }

  .site_box .site_item_add {
    height: 1.9rem;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .site_box .site_item_add .add_img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.17rem;
  }

  .site_box .line img {
    width: 100%;
    height: 0.05rem;
  }

  /*联系人样式 */
  .site_box .site_item {
    height: 1.9rem;
    font-size: 0.3rem;

    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }

  .site_box .site_item .more {
    width: 0.13rem;
    height: 0.24rem;
    margin-left: 0.31rem;
  }

  .site_box .site_item .site_item_box {
    padding-left: 0.2rem;
    padding-right: 0.3rem;
  }

  .site_box .site_item_box_name {
    margin-top: 0.43rem;
    margin-bottom: 0.33rem;
  }

  .site_box .site_item_box_site {
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(167, 167, 167, 1);
    line-height: 0.36rem;
  }

  /* 商品金额 */
  .order_money {
    margin-top: 0.68rem;
    margin-bottom: 0.58rem;
    font-size: 0.3rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .order_money em {
    font-weight: bold;
  }

  /* 商品运费 */
  .order_freight {
    margin-bottom: 0.96rem;
    font-size: 0.3rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .order_freight em {

    font-weight: bold;
    color: rgba(243, 40, 54, 1);
  }

  /* 备注 */
  .order_remark {
    font-size: 0.3rem;
    margin-bottom: 0.2rem;
    align-items: flex-start;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .order_remark textarea {

    font-weight: 400;
    color: rgba(167, 167, 167, 1);
    text-align: start;
    border: none;
  }

  /* 立即支付 */
  .pay_box_con {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 1.8rem;
    background-color: #ffffff;

  }

  .pay_box_con .pay_box_text {
    margin-left: 0.42rem;
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  .pay_box_con .pay_box_text span {
    font-weight: bold;
  }

  .pay_box_con .pay_box_btn {
    margin-right: 0.42rem;
    width: 2.55rem;
    height: 0.88rem;
    background: rgba(216, 30, 6, 1);
    text-align: center;
    line-height: 0.88rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    font-size: 0.28rem;
  }
</style>
<script>
  import Vue from 'vue';
  import { Toast } from 'vant';
  import getData from '@/assets/js/axios';
  import { RadioGroup, Radio } from 'vant';
    //支付页面地址
    import store from "@/store"
  export default {
    data() {
      return {
        show: false,//遮罩层内容
        showList: true,
        showEdit: false,
        settle_type:'1',
        goods_list:"",
        radios:'1',
        remarks:"",//备注
        immediatelyPara:{},//立即购买需要商品的信息
        list:{},//地址列表
        img: {
          add: require("../../assets/img/pay/add.png"),
          line: require("../../assets/img/pay/line.png"),
          more: require("../../assets/img/pay/more.png")
        }
      };
    },

    computed: {
      allprice(){
        //console.log(this,"jisuan")
        return function(a,b){
          // console.log(a,b,typeof a,typeof b,"oooooooooooooooo")
          return b*a
        }
      },
      price(){
        // console.log(e)
        return (e)=>{
          return (Number(e.goods_price)+e.diy_price).toFixed(2)
        }
      }
    },
    mounted () {
      //console.log(636)
      var type=this.$route.query.settle_type;
      var para={};
      if(type==0){
        //购物车购买
        this.settle_type=0;
        para={
          settle_type:this.settle_type,//结算类型：0购物车结算 1立即购买结算
        };
      }else{
        //立即购买
        this.settle_type=1;
        //获得本地存储的信心,赋值
       var str=window.sessionStorage.getItem("immediatelyPara");
       
       this.immediatelyPara=JSON.parse(str);
       console.log(this.immediatelyPara,"999999999999")
       para={
          goods_id:this.immediatelyPara.goods_id,//商品id,立即购买必须false立即购买必须
          attr_ids:this.immediatelyPara.attr_ids,//商品属性id;1,2,立即购买必须
          //address_id:23,//选择地址必须
          settle_type:this.settle_type,//结算类型：0购物车结算 1立即购买结算
        };

      };
    //获取内容
        getData.cartSettlement(para).then(res=>{
          console.log(res,"内容");
          var data=res.data.data.data;
          this.goods_list=data.goods_list;//商品价格列表
          //地址信息,本地存储,有的时候就选择,没有选择默认地址,提交之后清空
          var strlist=JSON.parse(window.sessionStorage.getItem("addinforlist"))
          if(strlist){
            this.list=strlist;
          }else{
            this.list=data.address;
          }
        }).catch(err=>{

        })

    },

    methods: {
      radio(a){
        console.log(a,"xunze")
      },
      //  支付发起
      pay() {
        this.show= true;
       // Toast.loading({
       //   message: '加载中...',
       //   forbidClick: true,
       // }); 
        // Toast.success('成功文案')

      },
      //提交
      paysub(){
        console.log(this.remarks,"文本内容");
        var goodsid;//立即购买id
        var goodsattr;//立即购买属性
        if(this.settle_type==0){
          //购物车购买不传id
        }else{
          //立即购买传id
          goodsid=this.immediatelyPara.goods_id;
          //立即购买属性
          goodsattr=this.immediatelyPara.attr_ids;
        };
        var para={
          settle_type:this.settle_type,//结算类型：0购物车 1立即购买
          order_type:1,//订单类型：1商城订单
          pay_type:this.radios,//1余额支付 2微信支付 3支付宝支付
          address_id:this.list.id,//收货地址id
          remark:this.remarks,//订单备注false
          goods_id:goodsid,//商品id,立即购买必须
          attr_ids:goodsattr,//商品属性id;1,2,立即购买必须
          order_sn:"",//订单号：待支付订单立即付款必须
        };
       getData.pay(para).then(res=>{
        console.log(res,"内容啊")
        if(res.data.code==2000){
          //Toast.success(res.data.msg);
          //this.$router.push("/cart");
        //console.log(res.data,this.remarks,"内容破")
          const url=res.data.data.pay.mweb_url; 
          sessionStorage.clear('addinforlist');//删除本地存储
          sessionStorage.clear('immediatelyPara');//删除立即购买本地存储
          this.immediatelyPara={};//删除立即购买本地存储
          window.location.href=url;
         Toast.success(res.data.msg);

          //console.log(res.data.data.pay.mweb_url,"支付地址")
        };
        //if(res.data.code==4000){
        //  Toast.success(res.data.msg);
        //  //this.$route.push("/cart");
        //};
        
    }).catch(err=>{
       })

      },
      //联系人列表
      showlist(type){
        this.$router.push('/consigneelist?type=1')
      }

    },
  };

</script>